.chat {
    display: flex;
    flex-direction: column;
    background: url('@/assets/chat/chat-back.png');
    background-size: cover;
    width: 1510px;
    height: 675px;
    .head {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 64px;
        border-bottom: 2px solid transparent;
        border-image: linear-gradient(90deg, rgb(70, 54, 255) 0%, rgb(203, 112, 255) 38.43%, rgb(48, 224, 255) 68.99%, rgb(76, 149, 252) 100%);
        border-image-slice: 1;
        .outer{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 9px;
            width: 205px;
            height: 48px;
            border: 2px solid transparent;
            border-radius: 85px;
            background: linear-gradient(white, white) padding-box,
                linear-gradient(90deg, rgb(70, 54, 255) 0%, rgb(203, 112, 255) 38.43%, rgb(48, 224, 255) 68.99%, rgb(76, 149, 252) 100%);
            .back {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 204px;
                height: 45px;
                border-radius: 64px;
                color: rgb(121, 72, 234);
                font-size: 20px;
                font-weight: 700;
                background-color: white;
            }
        }
        .title {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 216px;
            height: 53px;
            font-size: 36px;
            font-weight: 700;
            color: rgb(121, 72, 234);
            margin-left: 371px;
        }
        .outer-save{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 205px;
            height: 48px;
            margin-left: 460px;
            border: 2px solid transparent;
            border-radius: 64px;
            background: linear-gradient(white, white) padding-box,
                linear-gradient(90deg, rgb(70, 54, 255) 0%, rgb(203, 112, 255) 38.43%, rgb(48, 224, 255) 68.99%, rgb(76, 149, 252) 100%);
            .save {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 200px;
                height: 45px;
                border-radius: 64px;
                background-color: white;
                color: rgb(121, 72, 234);
                font-size: 20px;
                font-weight: 700;
            }
        }
    }
    .content{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 614px;
        .left{
            width: 758px;
            display: flex;
            flex-direction: column;
            height: 95%;
            margin-left: 5px;
            border-radius: 15px;
            background-color: white;
            position: relative;
            .top{
               display: flex;
               flex-direction: row;
               width: 758px;
               height: 30px;
               justify-content: space-between;
               align-items: center;
               border-bottom: 2px solid rgb(121, 72, 234);
                .current{
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 80px;
                  height: 20px;
                  font-size: 15px;
                  font-weight: 400;
                  color: rgb(121, 72, 234);
                  margin-left: 16px;
                }
                .left-save{
                   display: flex;
                   justify-content: center;
                   align-items: center;
                   width: 120px;
                   height: 20px;
                   font-size: 15px;
                   font-weight: 400;
                   color: rgb(121, 72, 234);
                   margin-right: 15px;
                }
                .save-dialog{
                    position: absolute;
                    top: 0;
                    left: 100%;
                }
            }
            .lesson{
                width: 758px;
                height: 581.25px;
                overflow: auto;
                .lesson::-webkit-scrollbar-thumb {
                    background-color: rgb(185, 163, 255);
                    /* 滚动条滑块颜色，这里设置为紫色 */
                    border-radius: 4px;
                    /* 滚动条滑块圆角 */
                }
            }
            .bottom{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                width: 758px;
                height: 30px;
                position: absolute;
                top: 544.5px;
                .history{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 120px;
                    height: 20px;
                    font-size: 15px;
                    font-weight: 400;
                    color: rgb(121, 72, 234);
                }
                .preview{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 120px;
                    height: 20px;
                    font-size: 15px;
                    font-weight: 400;
                    color: rgb(121, 72, 234);
                }
            }
        }
        .right{
            width: 612px;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 95%;
            margin-left: 19px;
            border-radius: 15px;
            background-color: white;
            .right-head{
                width: 612px;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 16px;
                font-weight: 400;
                color: rgb(121, 72, 234);
            }
            .chat-box{
                width: 612px;
                height: 400px;
            }
            .function-outer{
                margin-top: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 540px;
                height: 107px;
                border-radius: 22px;
                border: 2px solid transparent;
                background: linear-gradient(rgb(239, 239, 239), rgb(239, 239, 239)) padding-box,
                    linear-gradient(90deg, rgb(70, 54, 255) 0%, rgb(203, 112, 255) 38.43%, rgb(48, 224, 255) 68.99%, rgb(76, 149, 252) 100%);
                .message-textarea {
                    width: 2000px;
                    height: 65px;
                    border: none;
                    outline: none;
                    padding: 10px;
                    border-radius: 10px;
                    overflow-y: auto;
                    white-space: normal;
                    word-wrap: break-word;
                    margin-left: 5px;
                    background-color: rgb(239, 239, 239);
                    .textarea-placeholder{
                        color: rgb(56, 56, 56);
                    }
                }
                .function-box{
                    width: 536px;
                    height: 90px;
                    border-radius: 22px;
                    padding: 5px;
                    .box{
                       display: flex;
                       justify-content: center;
                       align-items: center;
                       width: 63px;
                       height: 24px;
                       margin-left: auto;
                       margin-top: 60px;
                       margin-right: 15px;
                        .enter{
                          background: url('@/assets/chat/enter.png');
                          background-size: cover;
                          display: flex;
                          justify-content: center;
                          align-items: center;
                          width: 17px;
                          height: 20px;
                        }
                        .copy{
                          background: url('@/assets/chat/save.png');
                          background-size: cover;
                          display: flex;
                          justify-content: center;
                          align-items: center;
                          width: 20.95px;
                          height: 25px;
                          margin-right: 12px;
                        }
                    }
                }
            }
        }
    }
}